home *** CD-ROM | disk | FTP | other *** search
/ .net (Poland) 2000 September / Magazyn_Net_09_2000 (CDB).iso / offline / R1 / lib / navi.js < prev    next >
Encoding:
JavaScript  |  2000-10-12  |  10.9 KB  |  361 lines
  1. //SUBNAVIGATION FUER R1
  2. //Programmierung: Wolfgang Mueller
  3. //Stand: 10.12.1999
  4.  
  5. var firstTime=true;
  6. var Faktor;
  7. var scrollingBack;
  8. var newPosition;
  9. var currentPosition;
  10. var Abdeckung = new Array();
  11. var stopScrolling;
  12. var mausXOld;
  13. var mausX, mausY;
  14. var breakDown=60;
  15. var LaufKomponente = 4;
  16. var simpleScrolling, checkCursor;
  17. var Browser=navigator.appName.substr(0,1);                            
  18. var BildBreite = new Array();                           
  19. var plugIn = ".style";                                          
  20. var Position=0;                                                                                               
  21. var Running=false;                                                      
  22. var NaviLeiste, NaviLeiste2;
  23. var Abstand=0;
  24. var cursorSet = false;
  25. var Bildweite=0;
  26. var breite;
  27. var Differenz;
  28. var bubblingNow = false;
  29. var selected;
  30. var Bilder=new Array();
  31. var rememberPosition;
  32. var slideIn;
  33. var lockMouse = false;
  34. var aktuellesBild=0;
  35. var BildNummer;
  36. var Bereichleft, Bereichright;
  37. var BildPos = new Array();
  38. var countLength = 0;
  39. var centering = false;
  40. var status=new Array();
  41.  
  42. if (Browser=="M")
  43.         {
  44.         NaviLeiste = document.all.Bildleiste;
  45.         breite=document.body.clientWidth;
  46.         NaviLeiste2 = document.all.Bildleiste2;
  47.         Bereichleft = Math.round(breite/2) - 150;
  48.         Bereichright = Bereichleft+300;
  49.                 
  50.         for (a=1;a<NumOfImages+1;a++)
  51.                 {
  52.                 eval("BildBreite["+a+"]=document.naviBild"+a+".width;");
  53.                 if (a==1) countLength -= BildBreite[a];
  54.                 countLength += BildBreite[a];
  55.                 BildPos[a] = countLength;
  56.                 BildPos[a+NumOfImages] = BildPos[a];
  57.                 eval("Bilder["+a+"]=document.naviBild"+a+";");
  58.                 status[a] = "blur";
  59.                 status[a+NumOfImages] = "blur";
  60.                 puffer = a+NumOfImages;                
  61.                 eval("Bilder["+puffer+"]=document.naviBild"+puffer+";");
  62.                 BildBreite[a+NumOfImages] = BildBreite[a];
  63.                 Bildweite += BildBreite[a];
  64.                 }
  65.         }
  66.         
  67. if (Browser=="N")
  68.         {
  69.         breite=self.innerWidth;
  70.         Bereichleft = Math.round(breite/2) - 150;
  71.         Bereichright = Bereichleft+300;
  72.         document.captureEvents(Event.MOUSEMOVE); 
  73.         NaviLeiste = document.layers[0];
  74.         plugIn = "";
  75.         for (a=1;a<NumOfImages+1;a++)
  76.                 {
  77.                 BildBreite[a]= document.Bildleiste.document.images[a-1].width;
  78.                 if (a==1) countLength -= BildBreite[a];
  79.                 countLength += BildBreite[a];
  80.                 BildPos[a] = countLength;
  81.                 BildPos[a+NumOfImages] = BildPos[a];
  82.                 Bilder[a] = document.Bildleiste.document.images[a-1];
  83.                 status[a] = "blur";
  84.                 status[a+NumOfImages] = "blur";        
  85.                 Bilder[a+NumOfImages] = document.Bildleiste2.document.images[a-1];
  86.                 BildBreite[a+NumOfImages] = BildBreite[a];
  87.                 Bildweite += BildBreite[a];
  88.                 }
  89.         NaviLeiste2 = document.layers[1];
  90.         }       
  91.    
  92.         document.onmousemove = getCoords;       
  93.  
  94. var fuerNetscape;
  95.  
  96.         
  97. function getCoords(Ereignis)
  98. {
  99.         if (lockMouse==false)
  100.             {
  101.                 clearTimeout(checkCursor);
  102.                 clearTimeout(fuerNetscape);
  103.                 if (LaufKomponente==1) stopScrolling=true;
  104.                 mausXOld = mausX;
  105.                 if (Browser=="N") {mausX = Ereignis.pageX;mausY = Ereignis.pageY;}
  106.                 if (Browser=="M") {mausX = window.event.x;mausY = window.event.y;}
  107.                 fuerNetscape = setTimeout("clearCursor();",1500);
  108.                 if((Math.abs(mausXOld-mausX) < 30)&&stopScrolling==true) followMouse();        
  109.             }
  110. }               
  111. function unite(Welches)
  112. {        
  113.         clearTimeout(checkCursor);
  114.  
  115.         if (cursorSet==false)
  116.             {
  117.             for (a=1;a<=NumOfImages;a++)
  118.                 {
  119.                 ax = a;
  120.                 if (a > NumOfImages*1.5) {ax-=NumOfImages*1.5;}
  121.                 else if (a > NumOfImages){ax-=NumOfImages;}
  122.                 else if (a > NumOfImages/2) {ax-=NumOfImages/2;}
  123.                 Bilder[a].src = "gfx/pic_menu"+ax+"_blur.jpg";
  124.                 }        
  125.             }
  126.         cursorSet=true;
  127.                 
  128.  
  129.         aktuellesBild=Welches        
  130.         BildNummer=aktuellesBild;
  131.         if (aktuellesBild > NumOfImages*1.5) {BildNummer-=NumOfImages*1.5;}
  132.         else if (aktuellesBild > NumOfImages){ BildNummer-=NumOfImages;}
  133.         else if (aktuellesBild > NumOfImages/2) {BildNummer-=NumOfImages/2;}
  134.  
  135.         Bilder[aktuellesBild].src = "gfx/pic_menu"+BildNummer+".jpg";
  136.     
  137. }
  138.  
  139. function scrollBars()
  140. {
  141.  
  142.     if (firstTime==true)
  143.         {
  144.         if (cursorSet==false && stopScrolling==false)
  145.             {
  146.             for (c=1;c<=NumOfImages;c++)
  147.                 {
  148.                 if (Abstand + BildPos[c] > Bereichleft && Abstand + BildPos[c] < Bereichright)
  149.                     {
  150.                     if (status[c] == "blur")
  151.                         {
  152.                         d=c;
  153.                         if (c > NumOfImages/2) d=c-(NumOfImages/2);
  154.                         status[c] = "light";
  155.                         Bilder[c].src = "gfx/pic_menu"+d+".jpg";                        
  156.                         }
  157.                     }                    
  158.                 if (Abstand + Bildweite + BildPos[c] > Bereichleft && Abstand + Bildweite + BildPos[c] < Bereichright)
  159.                     {
  160.                     if (status[c+NumOfImages] == "blur")
  161.                         {
  162.                         d=c;
  163.                         if (c > NumOfImages/2) d=c-(NumOfImages/2);
  164.                         status[c+NumOfImages] = "light";
  165.                         Bilder[c+NumOfImages].src = "gfx/pic_menu"+d+".jpg";                        
  166.                         }                    
  167.                     }
  168.                 if (Abstand + BildPos[c]  < Bereichleft || Abstand + BildPos[c]  > Bereichright)
  169.                     {
  170.                     if (status[c] == "light")
  171.                         {
  172.                         d=c;
  173.                         if (c > NumOfImages/2) d=c-(NumOfImages/2);
  174.                         status[c] = "blur";
  175.                         Bilder[c].src = "gfx/pic_menu"+d+"_blur.jpg";                        
  176.                         }
  177.                     }                    
  178.                 if (Abstand + Bildweite + BildPos[c]< Bereichleft || Abstand + Bildweite + BildPos[c] > Bereichright)
  179.                     {
  180.                     if (status[c+NumOfImages] == "light")
  181.                         {                        
  182.                         d=c;
  183.                         if (c > NumOfImages/2) d=c-(NumOfImages/2);
  184.                         status[c+NumOfImages] = "blur";
  185.                         Bilder[c+NumOfImages].src = "gfx/pic_menu"+d+"_blur.jpg";                        
  186.                         }                    
  187.                     }                                
  188.                 }
  189.             }            
  190.         stopScrolling=false;
  191.         clearTimeout(simpleScrolling);
  192.         Abstand-=LaufKomponente;
  193.         eval("NaviLeiste"+plugIn+".left = "+Abstand+";");
  194.         eval("NaviLeiste2"+plugIn+".left = "+Abstand+"+"+Bildweite*1+";");
  195.         if (Abstand<Bildweite*(-1)) Abstand=0;  
  196.         if (cursorSet==true) 
  197.                 {       
  198.                 if (breakDown < 80) breakDown +=5;
  199.                 if (breakDown > 40) LaufKomponente=4;
  200.                 if (breakDown > 60) LaufKomponente=3;
  201.                 if (breakDown > 70) LaufKomponente=2;
  202.                 if (breakDown >= 80) LaufKomponente=1;
  203.                 }
  204.         else if (cursorSet==false) 
  205.                 {
  206.                 if (breakDown!=60) breakDown-=5;
  207.                 if (breakDown > 60) LaufKomponente=2;
  208.                 if (breakDown > 70) LaufKomponente=1;   
  209.                 if (breakDown==60) LaufKomponente=3;
  210.                 }
  211.         if (stopScrolling==false) simpleScrolling = setTimeout("scrollBars();", breakDown);    
  212.     }
  213. }
  214.  
  215. function followMouse()
  216. {
  217.  
  218.     if (mausY > 1 && mausY < 80)
  219.         {
  220.         Abstand += (mausXOld-mausX);
  221.         eval("NaviLeiste"+plugIn+".left = "+Abstand+";");
  222.         eval("NaviLeiste2"+plugIn+".left = "+Abstand+"+"+Bildweite*1+";");
  223.         if (Abstand<Bildweite*(-1)) Abstand=0;
  224.         if (Abstand>0) Abstand=Bildweite*(-1);
  225.         }
  226.     else clearCursor();
  227. }
  228.  
  229. function clearCursor()
  230. {
  231.     if (firstTime==true) 
  232.         {
  233.         checkCursor = setTimeout("clearCursorNow()", 300);
  234.         BildNummer=aktuellesBild;
  235.         if (aktuellesBild > NumOfImages*1.5) {BildNummer-=NumOfImages*1.5;}
  236.         else if (aktuellesBild > NumOfImages){ BildNummer-=NumOfImages;}
  237.         else if (aktuellesBild > NumOfImages/2) {BildNummer-=NumOfImages/2;}
  238.  
  239.         if (aktuellesBild!=0) Bilder[aktuellesBild].src = "gfx/pic_menu"+BildNummer+"_blur.jpg";
  240.         }
  241.     if (firstTime==false) 
  242.         {
  243.         checkCursor = setTimeout("centerNavi2();",300);
  244.         BildNummer=aktuellesBild;
  245.         if (aktuellesBild > NumOfImages*1.5) {BildNummer-=NumOfImages*1.5;}
  246.         else if (aktuellesBild > NumOfImages){ BildNummer-=NumOfImages;}
  247.         else if (aktuellesBild > NumOfImages/2) {BildNummer-=NumOfImages/2;}
  248.     
  249.         if (selected != aktuellesBild) Bilder[aktuellesBild].src = "gfx/pic_menu"+BildNummer+"_blur.jpg";
  250.         }
  251. }
  252.  
  253. function clearCursorNow()
  254. {
  255.         cursorSet = false;
  256.         scrollBars();
  257. }       
  258.  
  259. function filter(Was)
  260. {    
  261.      centerNavi(Was);
  262. }
  263.  
  264. function centerNavi(Welche)
  265. {    
  266.         stopScrolling=true;
  267.         
  268.         if (firstTime==true)
  269.             {        
  270.             for (a=1;a<(NumOfImages*2)+1;a++)
  271.                 {
  272.                 BildNummer=a;
  273.                 if (BildNummer > NumOfImages*1.5) BildNummer-=NumOfImages*1.5;
  274.                 if (BildNummer > NumOfImages) BildNummer-=NumOfImages;
  275.                 if (BildNummer > NumOfImages/2) BildNummer-=NumOfImages/2;                    
  276.                 eval("Bilder["+a+"].src = 'gfx/pic_menu"+BildNummer+"_blur.jpg';");
  277.                 }
  278.             }
  279.         if (firstTime==false)
  280.             {
  281.             BildNummer=selected;
  282.             if (selected > NumOfImages*1.5) {BildNummer-=NumOfImages*1.5;}
  283.             else if (selected > NumOfImages){ BildNummer-=NumOfImages;}
  284.             else if (selected > NumOfImages/2) {BildNummer-=NumOfImages/2;}    
  285.             
  286.             Bilder[selected].src = "gfx/pic_menu"+BildNummer+"_blur.jpg";        
  287.             }
  288.  
  289.         lockMouse = true;
  290.         setTimeout("lockMouse=false;",1000);
  291.         firstTime=false;
  292.         Differenz=0;
  293.         clearTimeout(simpleScrolling);
  294.         
  295.         aktuellesBild=Welche;
  296.         BildNummer=aktuellesBild;
  297.         if (aktuellesBild > NumOfImages*1.5) {BildNummer-=NumOfImages*1.5;}
  298.         else if (aktuellesBild > NumOfImages){ BildNummer-=NumOfImages;}
  299.         else if (aktuellesBild > NumOfImages/2) {BildNummer-=NumOfImages/2;}
  300.         
  301.         Bilder[aktuellesBild].src = "gfx/pic_menu"+BildNummer+"_blur.jpg";                
  302.         if (Welche<NumOfImages/2) Welche+=NumOfImages/2;
  303.         if (Welche>(NumOfImages*1.5)-1) Welche-=NumOfImages/2;
  304.         
  305.         selected = Welche;
  306.         aktuellesBild=Welche;
  307.         BildNummer=aktuellesBild;
  308.         if (aktuellesBild > NumOfImages*1.5) {BildNummer-=NumOfImages*1.5;}
  309.         else if (aktuellesBild > NumOfImages){ BildNummer-=NumOfImages;}
  310.         else if (aktuellesBild > NumOfImages/2) {BildNummer-=NumOfImages/2;}
  311.         Bilder[aktuellesBild].src = "gfx/pic_menu"+BildNummer+".jpg";        
  312.         
  313.         for (a=1;a<Welche+1;a++) {Differenz += BildBreite[a];}         
  314.         newPosition=(Differenz-Math.round(breite/2)-Math.round(BildBreite[Welche]/2))*-1;
  315.         currentPosition = Abstand;
  316.         if (newPosition < currentPosition) Faktor = -1;
  317.         if (newPosition > currentPosition) Faktor = 1;    
  318.         slideIn=40;    
  319.         scrollNaviBack();    
  320. }
  321.  
  322. function centerNavi2()
  323. {
  324.  
  325.         cursorSet=false;
  326.         if (Abstand < newPosition-40 || Abstand > newPosition+40)
  327.             {
  328.             if (newPosition < Abstand) Faktor = -1;
  329.             if (newPosition > Abstand) Faktor = 1;        
  330.             slideIn=20;        
  331.             scrollNaviBack();
  332.             }
  333. }
  334.  
  335. function scrollNaviBack()
  336. {
  337.         if (Faktor==-1){
  338.             if (Abstand > newPosition)            
  339.                 {
  340.                 Abstand -= slideIn;
  341.                 eval("NaviLeiste"+plugIn+".left = "+Abstand+";");
  342.                 eval("NaviLeiste2"+plugIn+".left = "+Abstand+"+"+Bildweite*1+";");    
  343.                 scrollingBack = setTimeout("scrollNaviBack();",1);
  344.                 }
  345.             }
  346.         if (Faktor==1){
  347.             if (Abstand < newPosition)            
  348.                 {
  349.                 Abstand += slideIn;
  350.                 eval("NaviLeiste"+plugIn+".left = "+Abstand+";");
  351.                 eval("NaviLeiste2"+plugIn+".left = "+Abstand+"+"+Bildweite*1+";");    
  352.                 scrollingBack = setTimeout("scrollNaviBack();",1);
  353.                 }
  354.             }
  355. }
  356.  
  357.  
  358.  
  359. scrollBars();
  360.                 
  361.